<template>
  <el-dialog
    :title="info"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
    width="1100px">
    <el-form ref="form" :model="form" label-width="180px" :rules="rules">
      <el-form-item label="店铺联系电话" align="left" prop="mobile">
        <el-input v-model="form.mobile" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="店铺营业状态" align="left" prop="businessStatus">
        <el-select v-model="form.businessStatus">
          <el-option v-for="(typeItem,key) in shopBusinessStatusArr"
                     :key="key"
                     :label="typeItem.name"
                     :value="typeItem.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺营业时间" align="left" prop="businessTime">
        <!--        <el-input v-model="form.businessTime" style="width: 300px"></el-input>-->
        <el-time-select
          style="width: 120px"
          placeholder="起始时间"
          v-model="businessStartTime"
          @change="changeBusinessTime"
          value-format="hh:mm"
          :picker-options="{
      start: '05:30',
      step: '00:15',
      end: '23:45'
    }">
        </el-time-select>
        <el-time-select
          style="width: 120px"
          placeholder="结束时间"
          v-model="businessEndTime"
          @change="changeBusinessTime"
          value-format="hh:mm"
          :picker-options="{
      start: '05:30',
      step: '00:15',
      end: '23:45',
      minTime: businessStartTime
    }">
        </el-time-select>
      </el-form-item>
      <el-form-item label="店铺休息公告" align="left" prop="businessStopInfo">
        <el-input type="textarea" maxlength="100" v-model="form.businessStopInfo" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="配送费" align="left" prop="expressPrice">
        <el-input-number :controls="false" :step="0.01" v-model="form.expressPrice" :min="0" :max="99999999" style="width: 300px"></el-input-number>
      </el-form-item>
      <el-form-item label="满免配送费" align="left" prop="freeExpressPrice">
        <el-input-number  :controls="false" :step="0.01" v-model="form.freeExpressPrice" :min="0" :max="99999999" style="width: 300px"></el-input-number>
      </el-form-item>
      <el-form-item label="满减" align="left" prop="fullMinusPrice" v-if="form.id>0">
        <el-tag size="small" type="success" v-for="(item,index) in form.fullMinusPrice" :key="index" style="margin: 5px">{{ '满'+item.full+',减'+item.minus }}</el-tag>
        <el-button type="danger" @click="editFullMinus" size="mini">编辑</el-button>
      </el-form-item>
      <el-form-item label="是否同城配送" align="left" prop="isSameCitySend">
        <el-switch v-model="form.isSameCitySend"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>

    <full-minus-dialog ref="fullMinusDialog" :callback="setFullMinus"/>
  </el-dialog>
</template>

<script>
import FullMinusDialog from './FullMinusDialog'
export default {
  name: 'ChangeShopInfoDialog',
  components: {FullMinusDialog},
  props:{
    successFunction:Function
  },
  data: function () {
    let $this=this
    var checkContactMobile=function (rule, value, callback) {
      if (!$this.checkContactMobile($this.form.mobile)){
        callback(new Error('联系电话 必须是由数字组成，长度(7,12)位之间'))
      }else{
        callback()
      }
    }
    return {
      info:'店铺信息修改',
      currLoading:false,
      shopBusinessStatusArr:this.listToArray(dict.ShopBusinessStatusArr.slice(1,3)),
      dialogVisible: false,
      businessStartTime:'',
      businessEndTime:'',
      form: {
        id:0,
        mobile:'',
        businessTime:0,
        businessStatus:0,
        businessStopInfo: '',
        expressPrice: 0,
        freeExpressPrice: 0,
        fullMinusPrice:[],
        isSameCitySend: true,
      },
      rules: {
        mobile: [
          {required: true, message: '请输入 联系电话', trigger: ['blur', 'change']},
          {validator:checkContactMobile}
        ],
        businessStatus: [
          {required: true, message: '请输入 营业状态', trigger: ['blur', 'change']},
        ],
        businessTime: [
          {required: true, message: '请输入 营业时间', trigger: ['blur', 'change']}
        ],
        businessStopInfo: [
          {required: false, message: '请输入 休息公告', trigger: ['blur', 'change']},
          {min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: ['blur', 'change']}
        ],
        expressPrice: [
          {required: true, message: '请输入 配送费', trigger: ['blur', 'change']},
        ],
        freeExpressPrice: [
          {required: true, message: '请输入 满免配送费', trigger: ['blur', 'change']},
        ]
      }
    }
  },
  mounted () {
    console.log('shopBusinessStatusArr',this.shopBusinessStatusArr)
  },
  methods: {
    // 营业时间联动更改
    changeBusinessTime:function () {
      if (this.businessStartTime===null || this.businessEndTime===null){
        this.form.businessTime=''
        return;
      }
      if (this.businessStartTime.length>0 && this.businessEndTime.length>0){
        this.form.businessTime=this.businessStartTime+','+this.businessEndTime
      }else{
        this.form.businessTime=''
      }
    },
    // 设置满减回调
    setFullMinus:function (fullMinusPriceArr) {
      this.form.fullMinusPrice=fullMinusPriceArr
      this.$forceUpdate()
    },
    // 编辑满减,打开操作弹窗
    editFullMinus:function () {
      this.$refs.fullMinusDialog.open(this.form.fullMinusPrice)
    },
    // 打开弹窗
    open: function (infoData) {
      this.form.id = infoData.id
      this.form.mobile = infoData.mobile
      this.form.businessStatus = (infoData.businessStatus.id===2?1:0)
      this.form.businessTime = infoData.businessTime.join(',')
      this.businessStartTime = infoData.businessTime[0]
      this.businessEndTime = infoData.businessTime[1]
      this.form.businessStopInfo = infoData.businessStopInfo
      this.form.expressPrice = infoData.expressPrice
      this.form.fullMinusPrice = infoData.fullMinusPrice
      this.form.freeExpressPrice = infoData.freeExpressPrice
      this.dialogVisible = true
      this.$forceUpdate()
    },
    // 提交更新
    submit: function () {
      let $this=this
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var form=Object.assign({},$this.form)
          form.fullMinusPrice=JSON.stringify(form.fullMinusPrice?form.fullMinusPrice:[])
          form.businessStatus=form.businessStatus+1
          if (form.businessStatus===2){
            form.businessStopInfo=form.businessStopInfo?form.businessStopInfo:''
          }
          form.isSameCitySend=form.isSameCitySend?1:0
          if (!form.businessStopInfo){
            delete form.businessStopInfo
          }
          $this.$confirm('您确认要进行该操作吗?', '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            $this.currLoading=true
            $this.MyRequest($this.ApiDoNameShop+'Shop/update',form,function (data) {
              $this.$message.success('操作成功')
              if (typeof $this.$props.successFunction==='function'){
                $this.$props.successFunction()
              }
              $this.dialogVisible=false
              $this.currLoading=false
              $this.$forceUpdate()
            })
          }).catch(() => {
            $this.currLoading=false
            $this.$forceUpdate()
          });
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
